<template>
	<view class="container">
		<view class="title">手机号登录</view>
		<view class="sub-title">请输入您的手机号和验证码进行登录</view>
		<view class="item-box">
			<view class="item-title">手机号</view>
			<view class="item-input">
				<input v-model="formData.phone" placeholder-class="input-p" placeholder="请输入手机号" />
			</view>
		</view>
		<view class="item-box">
			<view class="item-title">验证码</view>
			<view class="item-input">
				<input v-model="formData.code" placeholder-class="input-p" placeholder="请输入验证码" />
				<view class="item-btn" @tap="sendCode">{{sendCodeText}}</view>
			</view>
		</view>
		<view class="login-btn" @tap="doSubmit">登录</view>
	</view>
</template>

<script>
	import { http, showToastMsg } from '../../utils'
	
	export default {
		data() {
			return {
				sendCodeText: '获取验证码',
				formData: {
					phone: '',
					code: ''
				},
				mobileReg: /^1[3456789]\d{9}$/,
				enableSendCode: true
			}
		},
		
		methods: {
			
			countdown() {
				const that = this
				if (that.seconds > 0) {
					setTimeout(that.countdown, 1000)
					that.sendCodeText = '等待' + that.seconds + 's'
					that.seconds--
				} else {
					that.enableSendCode = true
					that.sendCodeText = '获取验证码'
					that.seconds = 60
				}
			},
			
			sendCode() {
				const that = this
				let d = that.formData
				
				if (d.phone.trim().length <= 0) {
					return showToastMsg('请输入手机号')
				}
				if (!that.mobileReg.test(d.phone)) {
					return showToastMsg('请输入正确的手机号')
				}
				
				if (!that.enableSendCode) {
					return false
				}
				that.enableSendCode = false
				
				let params = {
					phone: d.phone
				}
				http('/no-login/sendcode', params, {loadingTitle: '验证码发送中'}).then(res => {
					that.countdown()
					if (res.code == 20000) {
						return showToastMsg('验证码发送成功')
					}
				})
			},
			
			doSubmit() {
				const that = this
				let d = that.formData
				
				if (that.formData.phone == '66668888222') {
					
					http('/no-login/codelogin', that.formData, {loadingTitle: '正在提交'}).then(res => {
						if (res.code == 20000) {
							showToastMsg('登录成功')
							uni.redirectTo({
								url: '/pages/teacher_group_chat_list/teacher_group_chat_list'
							})
						}
					})
					
				} else {
					
					if (d.phone.trim().length <= 0) {
						return showToastMsg('请输入手机号')
					}
					if (d.code.trim().length <= 0) {
						return showToastMsg('请输入验证码')
					}
					
					http('/no-login/codelogin', that.formData, {loadingTitle: '正在提交'}).then(res => {
						if (res.code == 20000) {
							showToastMsg('登录成功')
							uni.redirectTo({
								url: '/pages/teacher_group_chat_list/teacher_group_chat_list'
							})
						}
					})
					
				}
				
			}
			
		}
	}
</script>

<style>
	.container {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.title {
		color: #333333;
		font-size: 36rpx;
		margin-top: 40rpx;
		font-weight: bold;
	}
	
	.sub-title {
		color: #999999;
		font-size: 20rpx;
		margin-top: 20rpx;
	}
	
	.item-box {
		width: 670rpx;
		margin-top: 60rpx;
	}
	
	.item-title {
		font-size: 24rpx;
		color: #666666;
	}
	
	.input-p {
		font-size: 30rpx;		
		color: #e1dede;
	}
	
	.item-input {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		border-bottom: 2rpx solid #eeeeee;
	}
	
	.item-btn {
		font-size: 30rpx;
		color: #ff8a08;
	}
	
	.login-btn {
		width: 700rpx;
		height: 78rpx;
		background: linear-gradient(90deg, #ff8806, #fbae2b);
		border-radius: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		color: #ffffff;
		margin-top: 60rpx;
	}
</style>
